import React, { useState, useEffect, useRef } from 'react';
import { getList, postList } from '../../api/index'
import { CloseOutlined } from '@ant-design/icons'

import {
  Button,
  Drawer,
  Form,
  Input,
  Select,
  Spin
} from 'antd'

import './index.scss'

const { Option } = Select;


const My = () => {
  // getList('/list').then((res)=>{
  //   console.log(res.data);
  // })
  const [form] = Form.useForm();  
  const [open, setOpen] = useState(false);
  const [size, setSize] = useState()

  const showLargeDrawer = () => {
    setSize('large');
    setOpen(true);
    // setFlage(false)

  };

  const coseClick = () => {
    setOpen(false);

  }

  const onFinish = (value) => {
    console.log(value);
    postList('/form_add',value).then((res)=>{
      console.log(res.data.code);
    })
    form.resetFields();  
    setOpen(false);
  }

  return (
    <div id='Mybox'>

      <Button type="primary" onClick={showLargeDrawer}>新增</Button>
      <Drawer placement="right"
        className='addFrom'
        closable={false}
        size={size}
        open={open}>

        <div id="herder_Dawer" style={{
          width: '100%',
          display: 'flex',
          justifyContent: 'space-between',
          alignItems: 'center',
          borderBottom: '1px solid red',
        }}>
          <p style={{ fontWeight: '900', marginLeft: '30px' }}>个人信息</p>
          <span style={{ marginRight: '30px' }}>
            <CloseOutlined onClick={coseClick} />
          </span>
        </div>
        <Form form={form} onFinish={onFinish}>
          <div className="list" style={{ width: '100%', display: 'flex', justifyContent: 'space-around', padding: '20px' }}>
            <Form.Item
              label="Username"
              name="username"
              rules={[
                {
                  required: true,//必填
                  message: 'Please input your username!',
                },
              ]}
            >
              <Input />
            </Form.Item>
            <Form.Item label="passwrd" name="pass">
              <Input />
            </Form.Item>
          </div>
          <Form.Item label='公司' name='sed' rules={[
                {
                  required: true,//必填
                  message: 'Please input your sed!',
                },
              ]}>
            <Select>
              <Option value="贺阳集团">贺阳集团</Option>
              <Option value="振涛公司">振涛公司</Option>
            </Select>
          </Form.Item>

          <Form.Item label=" " colon={false}>
            <Button type="primary" htmlType="submit">
              Submit
            </Button>
          </Form.Item>
        </Form>
      </Drawer>
    </div>

  )
}
export default My;